<template>
  <section class="homepage-nav">
    <div class="nav-container">
      <div class="nav-logo">
        <img src="../../../assets/front/img/logo.png">
      </div>

      <div class="search-box">
        <input type="text" placeholder="我要卖茶籽">
        <img src="../../../assets/front/img/search.svg" @click="handleSearch">
      </div>
      <div class="nav-list">
        <div v-for="(item,index) in navItems" :key="index" class="nav-item" :class="{active:index===activeIndex}" @click="handleClick(index)">{{item.name}}</div>
      </div>
    </div>

  </section>
</template>

<script>
export default {
    props: {
        activeIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            navItems: [
                {
                    name: '首页',
                    path: '/f'
                }
            ]
        };
    },
    methods: {
        handleClick(index) {
            this.$router.push(this.navItems[index].path);
        },
        handleSearch() {
            this.$router.push('/f/search-result');
        }
    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-nav {
    box-sizing: border-box;
    padding:10px 5px;
    width:$page-width;
    height:85px;

    .nav-container {
      margin:0 auto;
      width: $page-width;
      height:100%;
      display: flex;
      align-items: center;
    }

    .nav-logo {
      width: 210px;
      >img {
        height:65px;
      }
    }

    .search-box {
      padding: 5px 15px;
      width:220px;
      height:40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: $bg-color;
      border-radius: 20px;
      input {
        width:155px;
        background: $bg-color;
        border: none;
        outline: none;
        -web-kit-appearance:none;
        -moz-appearance: none;
      }
      img {
        width:25px;
        height:25px;
        cursor: pointer;
      }
    }
    .nav-list {
      width: 770px;
      display: flex;
      justify-content: flex-end;
      font-size: 18px;
    }
    .nav-item {
      padding:0 20px;
      color: $font-gray-color;
      cursor: pointer;
      &.active {
        color: $main-color;
      }
    }

  }



</style>
